<template>
  <!-- ucharts图表实例模型 -->
  <view class="ucharts_comp">
    <canvas :canvas-id="canvasId" :id="domId" class="chart" :style="'width: ' + options.width + 'px;height: ' + options.height + 'px;'" @touchstart="touchPie" />
  </view>
</template>

<script>
import uCharts from '@/lib/u-charts/u-charts.min.js';
export default {
  name: 'ucharts_comp',
  props: {
    options: {
      type: Object,
      default: () => {}
    },
    canvasId: {
      type: String,
      default: 'canvasUCharts'
    },
    domId: {
      type: String,
      default: 'canvasUCharts'
    }
  },
  data() {
    return {
      optionsJson: {
        $this: this,
        canvasId: this.canvasId || 'canvasUCharts',
        type: 'line',
        legend: {
          show: true // 是否显示图例
        },
        fontSize: 13, // 字体大小
        background: '#FFFFFF',
        pixelRatio: 1, // 像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
        animation: true,
        categories: ['11月1日', '11月1日', '11月1日', '11月1日'],
        series: [
          {
            name: '成交A',
            data: ['820', '932', '901', '934']
          }
        ],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          disableGrid: true
        },
        dataLabel: true, // 是否显示文字标签
        width: uni.upx2px(750), // 宽
        height: uni.upx2px(750), // 高
        extra: {
          tooltip: {
            xAxisLabel: false, //是否显示X轴辅助标签
            yAxisLabel: false, //是否显示Y轴辅助标签
            bgColor: '#000000', //主体背景颜色
            bgOpacity: 0.5, //背景颜色透明度
          }
        }
      },
      canvaColumn: null
    };
  },
  created() {
    // 使用方法：
    // <UChartsModel v-if="uchartsOptions" :options="uchartsOptions"/>
    //   let maxData = 0; // 获取最大数据
    //   res.data.read_data.forEach((item, index) => {
    //     categories.push(item.datetime);
    //     seriesData.push(item.number);
    //     if (item.number > maxData) {
    //       maxData = item.number;
    //     }
    //   });
    // uchartsOptions = {
    //   width: uni.upx2px(675),
    //   height: uni.upx2px(463),
    //   fontSize: uni.upx2px(8),
    //   padding: [uni.upx2px(46), uni.upx2px(54), uni.upx2px(46), uni.upx2px(52)],
    //   yAxis: {
    //     max: maxData > 5 ? maxData : 5,
    //     splitNumber: 4, // 默认坐标轴刻度个数
    //     format: val => {
    //       return val.toFixed(0);
    //     }
    //   },
    // }
    for (let key in this.options) {
      // 重写option参数
      this.optionsJson[key] = this.options[key];
    }
    console.log(this.optionsJson);
    // 数据处理完毕，加载图表
    this.initLoad();
  },
  methods: {
    initLoad() {
      this.canvaColumn = new uCharts(this.optionsJson);
    },
    touchPie(e) {
      // 显示tooltip
      this.canvaColumn.showToolTip(e, {
        format: function(item, xAlis) {
          return xAlis + '：' + item.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ucharts_comp {
  .chart {
    background-color: #f6f6f6;
    border-radius: 17rpx;
  }
}
</style>
